<!-- 购买详情界面 -->
<template>
  <div id="bg" class="product-details">
    <h1>{{ product.title }}
      <br><br>
      <img src="https://img0.baidu.com/it/u=633559270,3828990747&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256" width="128" height="128" />
      <div img="https://img0.baidu.com/it/u=633559270,3828990747&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256"></div>
    </h1>
    <div class="bai">
    <p>{{ product.description }}</p>
    <p>单价: {{ product.price }} 元</p>
    <p>库存: {{ product.stock }} 件</p>
    <button @click="addToCart" :disabled="!isInStock"><router-link to="/shopman">购买</router-link></button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button ><router-link to="/gametest">返回</router-link></button>
    <br><br>
    <button ><router-link to="/collect">收藏</router-link></button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button ><router-link to="/maxdata">评价</router-link></button>
    <p v-if="!isInStock">库存不足</p>
  </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      product: {
        title: '贪吃蛇',
        description: '评价：简单易上手',
        price: 0,
        stock: 10000,
      },
      cart: [],
    };
  },
  computed: {
    isInStock() {
      return this.product.stock > 0;
    },
  },
  methods: {
    addToCart() {
      if (this.isInStock) {
        this.cart.push({ ...this.product, quantity: 1 });
        // 模拟减少库存
        this.product.stock -= 1;
        // 添加到购物车的逻辑
        // this.$http.post('/api/cart', this.product);
      }
    },
  },
};
</script>
 
<style>
.product-details {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}
.bai{
  color: #ffffff;
}
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* 渐变 */
  background-image: url("/src/views/photo/login.jpg");
  background-size: 100%;
}
</style>